<template>
  <div>
    <headerNav></headerNav>
    <div class="policyMap">
      <div class="policyNotice_Nav">
        <p class="mincard">
          <span @click="$router.push('/')">首页</span>>
          <span>政策图谱</span>
        </p>
      </div>
      <div class="policyMap_top">
        <div class="policyMap_top_title">
          <img src="../../assets/PolicyDataCenter.png" alt />
          <h3>政策数据中心</h3>
        </div>
        <div class="policyMap_top_content">
          <div class="policyMap_top_content_left">
            <nationalMap
              v-on:nationalMapaccept="Grade"
              @chooseCity="chooseCity"
              ref="nationalMap_dq"
            ></nationalMap>
          </div>
          <div class="policyMap_top_content_right">
            <PolicyStatistics
              :mapCity="mapCity"
              :mapCityType="mapCityType"
              :mapActProvince="mapActProvince"
              :mapActCity="mapActCity"
            ></PolicyStatistics>
          </div>
          <div class="policyMap_top_content_img">
            <img src="../../assets/wave.png" alt />
          </div>
        </div>
      </div>
      <div class="policyMap_condition" v-if="cityIndexxz">
        <div class="policyMap_condition_content">
          <div class="policyMap_condition_content_content">
            <div class="policyMap_condition_content_content_left">
              <span>地区：</span>
            </div>
            <div
              class="policyMap_condition_content_content_content"
              @click="moreEvent('provinceMore')"
              v-if="judgeWords(exhibitionData, 1)"
            >
              <span ref="provinceMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="provinceMore2" />
            </div>
            <ul class="policyMap_condition_content_content_right" ref="provinceMore">
              <li
                v-for="(item, index) in exhibitionData"
                :key="index"
                @click="regionSwitch(index)"
                :class="exhibitionIndex == index ? 'active' : ''"
              >{{ item }}</li>
            </ul>
          </div>
          <div class="policyMap_condition_content_content">
            <div class="policyMap_condition_content_content_left">
              <span>部门：</span>
            </div>
            <div
              class="policyMap_condition_content_content_content"
              @click="moreEvent('departmentMore')"
              v-if="judgeWords(departmentData, 2)"
            >
              <span ref="departmentMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="departmentMore2" />
            </div>
            <ul class="policyMap_condition_content_content_right" ref="departmentMore">
              <li :class="departmentIndex == -1 ? 'active' : ''" @click="departmentSwitch(-1)">全部</li>
              <li
                v-for="(item, index) in departmentData"
                @click="departmentSwitch(index)"
                :class="departmentIndex == index ? 'active' : ''"
                :key="index"
              >{{ item.departmentName }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="policyMap_bottom">
        <h3>政策数据</h3>
        <div class="policyMap_bottom_content">
          <dataStatistics ref="policyReference"></dataStatistics>
        </div>
      </div>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>

<script>
import nationalMap from "../../components/echarts/nationalMap.vue"; //全国地图
import PolicyStatistics from "../../components/echarts/PolicyStatistics.vue"; //右侧政策统计、最新动态
import dataStatistics from "../../components/echarts/dataStatistics.vue"; //底部数据表
import { commonRequest } from "../../api/api.js";
import { sessionTake } from "../../util/validate.js";
export default {
  name: "policyMap",
  components: {
    nationalMap,
    PolicyStatistics,
    dataStatistics
  },
  head() {
    return {
      title: "政策图谱-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "政策图谱" },
        {
          hid: "description",
          name: "description",
          content: "各个地区的政策图谱"
        }
      ]
    };
  },
  data() {
    return {
      // 所有地区
      regionData: "",
      // 所有部门
      departmentData: "",
      // 部门选中
      departmentIndex: -1,
      // 部门更多或收起
      moreOrLsess: true,
      // 是否展示
      cityIndexxz: false,
      // 展示地区
      exhibitionData: "",
      // 选中值
      exhibitionIndex: -1,
      // 判断选中的是省、市、区哪一个
      judgeIndex: 0,
      // 接收传过来的值
      indexPd: 0,
      // 选中的省级
      provincialLeveindex: "",

      mapCity: "", // 地图选中
      mapCityType: 0, // 省/市

      mapActProvince: "",
      mapActCity: ""
    };
  },
  mounted() {
    // 地区
    commonRequest("/api/pms/pmsDepartment/getAllDepartmentArea?type=0").then(
      res => {
        this.regionData = res;
        this.$refs.nationalMap_dq.allRegions(res);
        this.policyReferenceData();
      }
    );
  },
  methods: {
    judgeWords(data, index) {
      if (index == 1) {
        if (data) {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + (12 + 28) * data.length > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 2) {
        if (data) {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].departmentName;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    },
    // 接受地图选中
    chooseCity(type, val) {
      // console.log("城市", type, val);
      // 1:省  2:市
      this.mapCity = val;
      this.mapCityType = type;
      if (type === 1) {
        this.mapActProvince = val;
      } else {
        this.mapActCity = val;
      }
      // console.log(88888, this.mapActProvince, this.mapActCity);
    },
    Grade(type, value) {
      // console.log("2222", type, value);
      this.exhibitionData = [];
      if (type == -1) {
        this.cityIndexxz = false;
        this.exhibitionIndex = -1;
        this.judgeIndex = 0;
      } else {
        this.provincialLeveindex = type;
        this.exhibitionIndex = 0;
        this.cityIndexxz = true;
        // console.log("regionData", this.regionData);
        var name = this.regionData[type].province;
        name = name.replace(/省|市|自治区|特别行政区|壮族|回族|维吾尔/g, "");
        if (name == value) {
          this.judgeIndex = 1;
          this.indexPd = 1;
          this.exhibitionData.push(this.regionData[type].province);
          for (let i = 0; i < this.regionData[type].city.length; i++) {
            this.exhibitionData.push(this.regionData[type].city[i].name);
          }
        } else {
          this.indexPd = 2;
          this.judgeIndex = 2;
          for (let i = 0; i < this.regionData[type].city.length; i++) {
            if (value == this.regionData[type].city[i].name) {
              this.exhibitionData.push(this.regionData[type].city[i].name);
              for (
                let q = 0;
                q < this.regionData[type].city[i].area &&
                this.regionData[type].city[i].area.length;
                q++
              ) {
                this.exhibitionData.push(this.regionData[type].city[i].area[q]);
              }
            }
          }
        }
      }
      this.departmentRequest();
      this.policyReferenceData();
    },
    // 查看更多
    moreEvent(value) {
      if (this.$refs[value + "1"].innerHTML == "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    // 给政策数据传值
    policyReferenceData() {
      // var that = this;
      var provinceValue = null;
      var cityValue = null;
      var areaValue = null;
      var departmentValue = null;
      var data = [];
      if (this.judgeIndex != 0) {
        if (this.judgeIndex == 1) {
          provinceValue = this.exhibitionData[this.exhibitionIndex];
          for (
            let i = 0;
            i < this.regionData[this.provincialLeveindex].city.length;
            i++
          ) {
            data.push(this.regionData[this.provincialLeveindex].city[i].name);
          }
        }
        if (this.judgeIndex == 2) {
          cityValue = this.exhibitionData[this.exhibitionIndex];
          for (
            let i = 0;
            i < this.regionData[this.provincialLeveindex].city.length;
            i++
          ) {
            if (
              this.regionData[this.provincialLeveindex].city[i].name ==
              this.exhibitionData[this.exhibitionIndex]
            ) {
              data = this.regionData[this.provincialLeveindex].city[i].area;
            }
          }
        }
        if (this.judgeIndex == 3) {
          areaValue = this.exhibitionData[this.exhibitionIndex];
          data = this.departmentData;
        }
      } else {
        for (let i = 0; i < this.regionData.length; i++) {
          data.push(this.regionData[i].province);
        }
      }
      if (this.departmentIndex > -1) {
        departmentValue = this.departmentData[this.departmentIndex].id;
      }
      var shen = "";
      if (this.regionData[this.provincialLeveindex] != undefined) {
        shen = this.regionData[this.provincialLeveindex].province;
      }
      // console.log("-----", provinceValue);
      // console.log("-----", cityValue);
      // console.log("-----", areaValue);
      // console.log("-----", departmentValue);
      // console.log("-----", data);
      // console.log("-----", shen);
      // console.log("-----", this.exhibitionData[this.exhibitionIndex]);
      this.$refs.policyReference.dataRequest(
        provinceValue,
        cityValue,
        areaValue,
        departmentValue,
        data,
        shen,
        this.exhibitionData[this.exhibitionIndex]
      );
    },
    // 部门请求
    departmentRequest() {
      // var that = this;
      var provinceValue = "";
      var cityValue = "";
      var areaValue = "";
      if (this.judgeIndex != 0) {
        if (this.judgeIndex == 1) {
          provinceValue = this.exhibitionData[this.exhibitionIndex];
        }
        if (this.judgeIndex == 2) {
          cityValue = this.exhibitionData[this.exhibitionIndex];
        }
        if (this.judgeIndex == 3) {
          areaValue = this.exhibitionData[this.exhibitionIndex];
        }
      }
      commonRequest("/api/pms/pmsPolicyNotice/queryRegionDepartmentInfo", {
        province: provinceValue,
        city: cityValue,
        area: areaValue
      }).then(res => {
        this.departmentData = res;
      });
    },
    // 部门切换
    departmentSwitch(index) {
      this.departmentIndex = index;
      this.policyReferenceData();
    },
    // 地区切换
    regionSwitch(index) {
      this.departmentIndex = -1;
      if (index == 0) {
        this.judgeIndex = this.indexPd;
      } else {
        this.judgeIndex = this.indexPd + 1;
      }
      this.exhibitionIndex = index;
      this.departmentRequest();
      this.policyReferenceData();
    }
  }
};
</script>

<style lang="less" scoped>
.policyMap {
  width: 1200px;
  margin: 0px auto;
  .policyMap_top {
    margin-top: 28px;
    .policyMap_top_title {
      overflow: hidden;
      img {
        float: left;
        width: 18px;
        margin-top: 7px;
      }
      h3 {
        float: left;
        line-height: 32px;
        font-size: 24px;
        font-weight: 700;
        color: #333333;
        margin-left: 22px;
      }
    }
    .policyMap_top_content {
      margin-top: 30px;
      position: relative;
      &::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .policyMap_top_content_left {
        float: left;
        width: 800px;
        height: 600px;
        position: relative;
        z-index: 1;
      }
      .policyMap_top_content_right {
        float: left;
        width: 400px;
        height: 600px;
        position: relative;
        z-index: 1;
      }
      .policyMap_top_content_img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 20px);
        img {
          width: 100%;
        }
      }
    }
  }
  .policyMap_condition {
    margin: 50px 0 30px 0;
    min-height: 1px;
    .policyMap_condition_content {
      background-color: #fff;
      box-shadow: 1px 2px 4px #eee;
      .policyMap_condition_content_content {
        padding: 10px 20px;
        overflow: hidden;
        border-bottom: 1px solid #f2faff;
        position: relative;
        .policyMap_condition_content_content_left {
          float: left;
          span {
            font-size: 14px;
            color: #333333;
            display: inline-block;
            line-height: 26px;
            font-size: 14px;
            margin: 3px 0;
          }
        }
        .policyMap_condition_content_content_right {
          margin-left: 60px;
          margin-right: 40px;
          overflow: hidden;
          max-height: 32px;
          li {
            float: left;
            line-height: 22px;
            padding: 2px 6px;
            font-size: 14px;
            margin: 3px 14px;
            cursor: pointer;
            border-radius: 4px;
            &:hover {
              background-color: #44a2ff;
              color: #fff;
            }
          }
          .active {
            background-color: #44a2ff;
            color: #fff;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            img {
              width: 16px;
              position: absolute;
              right: -2px;
              top: -2px;
            }
          }
          .active1 {
            padding-right: 16px;
          }
        }
        .policyMap_condition_content_content_content {
          position: absolute;
          right: 20px;
          top: 15px;
          width: 40px;
          overflow: hidden;
          cursor: pointer;
          span {
            font-size: 14px;
            color: #44a2ff;
          }
          img {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
          }
        }
      }
    }
  }
  .policyMap_bottom {
    border-top: 1px solid #daeaf5;
    overflow: hidden;
    h3 {
      margin: 30px 0 40px 0;
      font-size: 24px;
      color: #333333;
      font-weight: 700;
    }
    .policyMap_bottom_content {
      width: 100%;
      height: 260px;
    }
  }
}
</style>
